<template>
  <div class="flexbc kf">
    <div style="position: fixed; left: 0.2rem; top: 0.2rem;">
      <i class="el-icon-s-fold" style="font-size: 25px; border: 1px rgb(229, 232, 236) solid; border-radius: 0.1rem; padding: 0.1rem; background: #fff;" @click="show = true"></i>
    </div>
    <div class="kf2">
      <div v-for="item in list" :key="item.id" @click="$router.push('/shops_detail?id='+item.id)">
        <div class="sp">
          <div class="kflexbc">
            <div style="margin-bottom: 0.2rem; font-size: 12px; color: #999;">发布时间：{{item.created_at}}</div>
            <div class="kflex">
              <div style="margin-bottom: 0.2rem; font-size: 12px; color: #999; margin-right: 0.2rem;">修改人：{{item.update_by}}</div>
              <div style="margin-bottom: 0.2rem; font-size: 12px; color: #999;">修改时间：{{item.updated_at}}</div>
            </div>
          </div>
          <div style="margin-bottom: 0.2rem; font-size: 20px; font-weight: bold; color: #515151;">{{item.title}}</div>
          <div class="kflexc" style="margin-bottom: 0.2rem;">
            <div class="xb">商品编码：{{item.fetch_code}}</div>
            <div class="xb">运营商：
              <!-- <span v-if="item.operator == 10086">中国移动</span>
              <span v-if="item.operator == 10010">中国联通</span>
              <span v-if="item.operator == 10000">中国电信</span> -->
              <span v-if="item.operator == 10099">中国广电</span>
              <!-- <span v-if="item.operator == 11111">虚拟运营商</span> -->
            </div>
            <div class="xb">归属地：{{item.location}}</div>
            <div class="xb">允许销售平台：{{item.xspt}}</div>
          </div>
          <div class="kflexc">
              <div style="max-width: 2.5rem; flex: 1; margin-bottom: 0.2rem;">
                <div style="color: rgb(153, 153, 153); font-size: 14px; margin-bottom: 0.1rem;">月租</div>
                <div style="color: rgb(51, 51, 51); font-size: 20px;">{{item.yz}}元</div>
              </div>
              <div style="max-width: 2.5rem; flex: 1;margin-bottom: 0.2rem;">
                <div style="color: rgb(153, 153, 153); font-size: 14px; margin-bottom: 0.1rem;">语音通话</div>
                <div style="color: rgb(51, 51, 51); font-size: 20px;">{{item.yyth}}</div>
              </div>
              <div style="max-width: 2.5rem; flex: 1;margin-bottom: 0.2rem;">
                <div style="color: rgb(153, 153, 153); font-size: 14px; margin-bottom: 0.1rem;">通用流量</div>
                <div style="color: rgb(51, 51, 51); font-size: 20px; color: #2974FF;">{{item.tyll}}</div>
              </div>
              <div style="max-width: 2.5rem; flex: 1;margin-bottom: 0.2rem;">
                <div style="color: rgb(153, 153, 153); font-size: 14px; margin-bottom: 0.1rem;">定向流量</div>
                <div style="color: rgb(51, 51, 51); font-size: 20px;">{{item.dxll}}</div>
              </div>
          </div>
          <div style="font-size: 12px; color: rgb(119, 119, 120);">最近一次更新：{{item.updated_at}}</div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="show" position="left">
      <div style="height: 100vh; width: 200px; padding: 10px; box-sizing: border-box;">
        <div><el-input v-model="searchs.input" placeholder="请输入内容"></el-input></div>
        <div>
          <div class="kfli" v-for="(item,index) in diqu" @click="search(item)" :class="act == item?'act':''"> {{item}}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import axios from 'axios'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    name: "kf",
    data() {
      return {
        show:false,
        act:"",
        searchs:{},
        list:[],
        diqu:['全部','北京市','天津市','河北省','山西省','内蒙古自治区','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','辽宁省','福建省','江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省',
        '重庆市','四川省','贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区','台湾省','香港特别行政区','澳门特别行政区']
      }
    },
    created() {
      this.getlist()

    },
    mounted() {
      if(document.documentElement.clientWidth > 1000){
        var h = document.documentElement.clientWidth / 19.2 + 'px';
        document.documentElement.style.fontSize = h;
      }else{
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
      }

    },
    methods: {
      search:function(val){
        this.act = val
        this.getlist(val)
      },
      //获取列表
      getlist: function(val) {
        let addr = ''
        if(this.act != '全部'){
          addr = this.act
        }
        axios.get('/api/gth/information/groupInfoListShare?id='+this.$route.query.id+'&addr='+addr)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .kf { min-height: 100vh;  font-size: 16px;
    /deep/ .el-input{ display: none;}
    .kfli{ padding: 0.1rem 0 0.1rem 0.3rem; cursor: pointer; font-size: 14px;}
    .kf2{ width: 100%;  height: 100%; background: rgb(242, 245, 255); padding: 0.2rem; box-sizing: border-box;}
    .xb{ background: rgb(242, 245, 255); color: rgb(102, 102, 102); padding: 0.1rem 0.2rem; border-radius: 0.1rem; margin-right: 0.2rem; margin-bottom: 0.2rem; font-size: 12px;}
    .sp{ padding: 0.4rem; font-size: 16px; border-radius: 0.1rem; background: #fff; margin-bottom: 0.2rem; }
    .act{ color: #2974FF;}
  }
</style>
